<template>
  <div class="forget">
    <div class="forget-content_template">
      <div class="forget-content">
        <c-time-line :active="active" :list="['验证身份', '设置密码', '完成']"/>
        <c-verify-identity @change="handleModuleChange" v-show="active === 0" />
        <c-change-password @change="handleModuleChange" v-show="active === 1" />
        <div class="forget-content_tips">
          <div>特别说明：</div>
          <div>1.可通过邮箱找回，请确认您手机在身边；</div>
          <div>2.如果长时间未接收到邮箱短信，请查看您的拦截短信;</div>
          <div>3.无法通过以上方式找回登录密码时，请及时联系客服人员协助。</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ArrowLeft } from "@element-plus/icons-vue";
import cTimeLine from "@/components/TimeLine/index.vue";
import cVerifyIdentity from "./components/VerifyIdentity.vue";
import cChangePassword from "./components/ChangePassword.vue";
const router = useRouter();
const active = ref(0);
const handleModuleChange = () => {
  if (active.value < 2) {
    active.value += 1;
  } else if (active.value === 2) {
    router.go(-1)
  }
};
const handleGoBack = () => {
  router.go(-1);
};
</script>
<style lang="less" scoped>
.forget {
  .forget-content_template {
    width: 100%;
    background: #fff;
    border-radius: 3px;
    padding: 18px 20px;
    .forget-content {
      margin: 80px auto 70px auto;
      width: 50%;
      .forget-content_tips {
        margin-top: 70px;
        background: rgba(0, 0, 0, 0.02);
        padding: 12px 30px;
        font-size: 12px;
        color: #8c8c8c;
        line-height: 26px;
      }
    }
  }
}
</style>